<style scoped>
  li {
    list-style: none;
  }

  .iconImg {
    font-size: 40px;
    margin-left: 30px;
  }

  .servertab {
    /* border:1px solid #DCDCDC; */
    padding-top: 8px;
    /* padding-left: 10px; */
    height: 120%;
    padding-bottom: 10px;
  }

  .el-header {
    height: 135px !important;
  }

  .el-col-24 {
    width: 100px;
  }

  .serverName {
    width: 100px;
    text-align: center;
  }

  .el-form-item .adjustInp .el-input__inner {
    background: #fff;
  }

  .icon-q {
    font-size: 20px;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
  }

  .tub-b {
    position: relative;
  }

  .topBar {
    display: block;
    margin: 0;
    padding: 0 14px;
    margin-bottom: 6px;
    color: #3E8EF7;
    height: 20px;
    font: 16px/20px '微软雅黑';
    text-align: right;
  }
</style>

<template>
  <div class="servertab" v-show="showserver">
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple">服务链设置</div>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" :disabled="judgeShow" plain @click="newList">+新增服务链</el-button>
      </el-col>
    </el-row>
    <el-aside width="200px">
      <ul>
        <!-- <li>服务域{{}}</li> -->
        <!-- <li v-for="item in serverList">{{item.value}}</li> -->
      </ul>
    </el-aside>
    <el-header v-for="(list, index) in allList" v-show="true" :key="index"
               style="border:1px solid #DCDCDC;padding-top:8px;margin-top:10px;border-radius:5px">
      <el-row style="margin-bottom:5px">
        <el-col :span="4">
          <div class="grid-content bg-purple">服务链：Area-00{{index+1}}</div>
        </el-col>
        <el-col :span="7" :offset="0">
          <el-select
            v-model="list.values"
            :disabled="judgeShow || !list.showRight"
            multiple
            placeholder="请选择安全域"
            style="width:100%"
            :multiple-limit="2" @change="sercerChange(list.values, index)">
            <el-option
              v-for="item in nameFromChild"
              :key="item.domainName"
              :label="item.domainName"
              :value="item.domainName"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-button type="primary" size="medium" plain v-show="list.showRight" :disabled="judgeShow"
                     @click="saveBtn(index, list)">+保存
          </el-button>
          <el-button type="primary" size="medium" plain v-show="!list.showRight" :disabled="judgeShow"
                     @click="changeBtn(index)">编辑
          </el-button>
          <el-button type="danger" size="medium" plain v-show="list.showRight" :disabled="judgeShow"
                     @click="deleEvent(index)">删除服务链
          </el-button>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-select v-model="list.value" placeholder="新增" style="width:100%;margin-left:10px"
                     :disabled="judgeShow || !list.showRight" @visible-change="addIcon($event,list.value,index)"
                     @change="newEquipment(list.value,index)">
            <el-option
              v-for="item in equipmentNew"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-left:0">
        <el-col v-for="(unit, indexbs) in list.unitList" :key="indexbs">
          <div class="tub-b">
            <div @click="fireTab(unit, index, indexbs)">
              <span v-if="unit.value == 1" class="iconfont icon-fanghuoqiang iconImg"></span>
              <span v-if="unit.value == 2" class="iconfont icon-vpn iconImg"></span>
              <span v-if="unit.value == 3" class="iconfont icon-waf iconImg"></span>
              <span v-if="unit.value == 4" class="iconfont icon-xuniips iconImg"></span>
              <span v-if="unit.value == 5" class="iconfont icon-ids iconImg"></span>
              <span v-if="unit.value == 6" class="iconfont icon-yingyonganquanwangguan iconImg"></span>
              <div class="serverName">{{unit.label}}</div>
            </div>
            <div class="icon-q el-icon-error" @click="deleteIcon(unit, index, indexbs)"></div>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- vpn列表数据 -->

    <el-dialog title="配置选项" :visible.sync="flagval" append-to-body width="65%" :close-on-click-modal="false">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 用户管理选项 -->


        <el-tab-pane label="物理接口配置" name="first">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="接口名称" width="360"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" @click="interfaceEdit (scope.row.id)" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--        下面是路由配置更改为防火墙同样字段的修改-->

        <el-tab-pane label="路由配置" name="second">
          <!-- 这是分割线 -->
          <p class="topBar"><span @click="addRouter" v-if="!judgeShow">新建路由</span></p>
          <el-table
            :data="routingConfigurations"
            border
            style="width: 100%">
            <el-table-column
              prop="destinationAddress"
              label="目的地址"
              width="180">
            </el-table-column>
            <el-table-column
              prop="mask"
              label="掩码"
              width="180">
            </el-table-column>
            <el-table-column
              prop="priority"
              label="优先级">
            </el-table-column>
            <el-table-column
              prop="nextHop"
              label="下一跳">
            </el-table-column>
            <el-table-column
              prop="outflowInterface"
              label="网络接口">
            </el-table-column>
            <!--            <el-table-column-->
            <!--              prop="weights"-->
            <!--              label="权重">-->
            <!--            </el-table-column>-->
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, routingConfigurations)"
                  type="text"
                  size="small" :disabled="judgeShow">
                  移除
                </el-button>
                <el-button
                  @click="editRouter(scope.row,scope.$index)" size="small" type="text" :disabled="judgeShow">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--        下面是路由配置更改为防火墙同样字段的修改-->

        <el-tab-pane label="ipsec基本配置" name="third">
          <el-form ref="form" :model="ipsecConfiguration" label-width="120px">
            <el-form-item label="启用IPsec功能：">
              <el-checkbox :model="ipsecConfiguration.enableFlag" checked name="type"></el-checkbox>
            </el-form-item>
            <el-form-item label="IKE秘钥周期：">
              <el-input v-model="ipsecConfiguration.ikecycle" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="IPsec秘钥周期：">
              <el-input v-model="ipsecConfiguration.ipsecCycle" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="预共享秘钥：">
              <el-input v-model="ipsecConfiguration.presharedKey" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="IKE端口设置:">
              <el-input v-model="ipsecConfiguration.ikeport" class="adjustInp" vlaue="1" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="NAT端口设置：">
              <el-input v-model="ipsecConfiguration.natport" class="adjustInp" vlaue="1" style="width:200px"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="vpn规则配置" name="fourth">
          <el-form ref="form" :model="vpnRules" label-width="120px">
            <el-form-item label="规则名：">
              <el-input v-model="vpnRules.ruleName" class="adjustInp" :disabled="true" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="地址类型：">
              <el-select v-model="vpnRules.addressType" placeholder="请选择">
                <el-option label="网络地址" value="0"></el-option>
                <!-- <el-option label="网络地址" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="本端保护网络：">
              <el-input v-model="vpnRules.localProtectionNetwork" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="本端保护协议：">
              <el-select v-model="vpnRules.localProtectionProtocol" placeholder="请选择">
                <el-option label="any" value="0"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="对端保护网络：">
              <el-input v-model="vpnRules.peerProtectionNetwork" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="对端保护协议：">
              <el-select v-model="vpnRules.peerProtectionProtocol" placeholder="请选择">
                <el-option label="any" value="0"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="IKE配置" name="five">
          <el-form ref="form" :model="ikeConfiguration" label-width="120px">
            <el-form-item label="名称：">
              <el-input v-model="ikeConfiguration.ikename" class="adjustInp" :disabled="true" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="类型：">
              <el-select v-model="ikeConfiguration.iketype" placeholder="请选择">
                <el-option label="默认网关" value="gateway"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="对端地址类型：">
              <el-select v-model="ikeConfiguration.peerAddressType" placeholder="请选择">
                <!-- <el-option label="10.0.0.1" value="0"></el-option> -->
                <el-option label="ip地址" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="对端地址：">
              <el-input v-model="ikeConfiguration.peerAddress" class="adjustInp" vlaue="1"
                        style="width:200px" @blur="isIp(ikeConfiguration.peerAddress)"></el-input>
            </el-form-item>
            <el-form-item label="协议类型：">
              <el-select v-model="ikeConfiguration.ProtocolType" placeholder="请选择">
                <el-option label="国际通用标准1" value="0"></el-option>
                <el-option label="国际通用标准2" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="认证方式：">
              <el-select v-model="ikeConfiguration.authenticateType" placeholder="请选择">
                <el-option label="预共享密码" value="0"></el-option>
                <!-- <el-option label="预共享密码2" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="预共享秘钥：">
              <el-input v-model="ikeConfiguration.presharedKey" class="adjustInp" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="">
              <!-- <el-button type="primary" @click="onSubmit">高级选项</el-button> -->
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="安全策略" name="eight">
          <el-form ref="form" :model="securityPolicy" label-width="120px">
            <el-form-item label="序号：">
              <el-input v-model="securityPolicy.order" class="adjustInp" :disabled="true" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="名称：">
              <el-input v-model="securityPolicy.name" class="adjustInp" :disabled="true" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="源地址：">
              <el-select v-model="securityPolicy.sourceAddress" placeholder="请选择">
                <el-option label="any" value="0"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="源端口：">
               <el-input v-model="securityPolicy.srcport" class="adjustInp" style="width:200px"></el-input>
            </el-form-item> -->
            <el-form-item label="目的地址：">
              <el-select v-model="securityPolicy.destination" placeholder="请选择">
                <el-option label="any" value="0"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="时间：">
              <el-select v-model="securityPolicy.time" placeholder="请选择">
                <el-option label="10.0.0.1" value="0"></el-option>
                <el-option label="自适应二" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流入网口：">
              <el-select v-model="securityPolicy.InflowNetwork" placeholder="请选择">
                <el-option label="10.0.0.1" value="0"></el-option>
                <el-option label="自适应二" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流出网口：">
              <el-select v-model="securityPolicy.OutflowNetwork" placeholder="请选择">
                <el-option label="10.0.0.1" value="0"></el-option>
                <el-option label="自适应二" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务：">
              <el-select v-model="securityPolicy.service" placeholder="请选择">
                <el-option label="10.0.0.1" value="0"></el-option>
                <el-option label="自适应二" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="记录日志：">
              <el-checkbox name="type" checked></el-checkbox>
            </el-form-item> -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="隧道配置" name="six">
          <el-form ref="form" :model="tunnelConfiguration" label-width="120px">
            <el-form-item label="隧道名称：">
              <el-input v-model="tunnelConfiguration.tunnelName" class="adjustInp" :disabled="true" vlaue="1"
                        style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="本地出口：">
              <el-select v-model="tunnelConfiguration.localExit" placeholder="请选择">
                <el-option label="eth1" value="eth1"></el-option>
                <el-option label="eth2" value="eth2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绑定IKE：">
              <el-select v-model="tunnelConfiguration.bindingIKE" placeholder="请选择">
                <el-option label="test" value="test"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="关联VPN规则：">
              <el-select v-model="tunnelConfiguration.associatedVPNRules" placeholder="请选择">
                <el-option label="test" value="test"></el-option>
                <!-- <el-option label="自适应二" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用：">
              <el-checkbox name="type" checked></el-checkbox>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="规格配置" name="elevn">
          <!--          <el-form :inline="true" label-width="90px" label-position="left">-->
          <!--            <el-form-item label="规格模板">-->
          <!--              <el-select v-model="createVM.dname" value-key="did" placeholder="请选择模板" @change="newcreateVm">-->
          <!--                <el-option v-for="itme in allCreateVM" :label="itme.dname" :key="itme.did" :value="itme"></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--            <br/>-->
          <!--            <el-form-item label="CPU">-->
          <!--              <el-input v-model="createVM.cpu" class="adjustInp" :disabled="true" style="max-width:200px"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <br/>-->
          <!--            <el-form-item label="磁盘空间">-->
          <!--              <el-input v-model="createVM.disk" class="adjustInp" :disabled="true"-->
          <!--                        style="max-width:200px;background-color:#fff;"></el-input>-->
          <!--            </el-form-item>-->
          <!--            <br/>-->
          <!--            <el-form-item label="内存">-->
          <!--              <el-input v-model="createVM.memory" class="adjustInp" :disabled="true" style="max-width:200px"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-form>-->

          <el-form :inline="true" label-width="90px" label-position="left">
            <el-form-item label="规格模板">
              <el-select v-model="createVM.dname" value-key="did" placeholder="请选择模板"
                         @change="newcreateVm(createVM.dname)">
                <!--              <el-select v-model="createVM" value-key="did" placeholder="请选择模板" @change="newcreateVm">-->
                <el-option v-for="itme in allCreateVM" :label="itme.dname" :key="itme.did"
                           :value="itme.dname"></el-option>
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="CPU">
              <el-input v-model="createVM.cpu" class="adjustInp" :disabled="true"
                        style="width: 200px;background-color: #fff;"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="磁盘空间">
              <el-input v-model="createVM.disk" class="adjustInp" :disabled="true"
                        style="width: 200px;background-color: #fff;"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="内存">
              <el-input v-model="createVM.memory" class="adjustInp" :disabled="true"
                        style="width: 200px;background-color: #fff;"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" v-if="!judgeShow">
        <el-button @click="flagval = false">取 消</el-button>
        <el-button type="primary" @click="vpnSurBtn(socFlag)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="物理网口配置" :visible.sync="interfacesShow" width="50%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="physicalInterfacesEthx" :rules="physicalForm" label-width="100px">
        <el-form-item label="接口名称" prop="interfaceName">
          <el-input v-model="physicalInterfacesEthx.interfaceName" class="adjustInp" :disabled="true" vlaue="1"
                    style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="工作模式">
          <el-select v-model="physicalInterfacesEthx.operatingMode" placeholder="请选择">
            <el-option label="路由模式" :value="0"></el-option>
            <el-option label="透明模式" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网络">
          <el-select v-model="physicalInterfacesEthx.netWorkName" placeholder="请选择">
            <el-option v-for="(item,index) in netWorkName" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址获取">
          <el-select v-model="physicalInterfacesEthx.ipobtainMode" placeholder="请选择" @change="staticxz">
            <el-option label="通过DHCP获取" :value="0"></el-option>
            <el-option label="静态配置" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址">
          <!--          <el-input v-model="physicalInterfacesEthx.ipaddressAndMask01" class="adjustInp" :disabled="newDistinguish"-->
          <!--                    vlaue="" style="width:200px"></el-input>-->
          <!--          /-->
          <!--          <el-input v-model="physicalInterfacesEthx.IPMask" class="adjustInp" :disabled="newDistinguish" vlaue=""-->
          <!--                    style="width:200px"></el-input>-->
          <el-input v-model="ipaddressAndMask01" class="adjustInp" :disabled="newDistinguish"
                    vlaue="" style="width:200px" @blur="isIp(ipaddressAndMask01)"></el-input>
          /
          <el-input v-model="IPMask" class="adjustInp" :disabled="newDistinguish" vlaue=""
                    style="width:200px" @blur="isIp(IPMask)"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!judgeShow">
        <el-button @click="interfacesShow = false">取 消</el-button>
        <el-button type="primary" @click="interfacesSurBtn(interfacesId)">确 定</el-button>
      </span>
    </el-dialog>


    <!--    <el-dialog-->
    <!--      title="新建路由"-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="500px"-->
    <!--      append-to-body>-->
    <!--      <el-form ref="form" :model="defaultRouteObj" label-width="120px">-->
    <!--        <el-form-item label="默认网关：">-->
    <!--          <el-input v-model="defaultRouteObj.gateway" class="adjustInp" vlaue="1" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="metric：">-->
    <!--          <el-input v-model="defaultRouteObj.priority" class="adjustInp" vlaue="1" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="权重值：">-->
    <!--          <el-input v-model="defaultRouteObj.weights" class="adjustInp" vlaue="1" style="width:200px"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="网络接口">-->
    <!--          <el-select v-model="defaultRouteObj.defaultRoutingInterface" placeholder="ajhjsa">-->
    <!--            <el-option label="eth1" value="eth1"></el-option>-->
    <!--            <el-option label="eth2" value="eth2"></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="confirm">确 定</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
    <!--    下面是路由配置更改为防火墙字段更改的字段-->


    <el-dialog
      title="新建路由"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body :close-on-click-modal="false">
      <el-form label-width="120px" label-position="left" :model="routingConfigurationsObj">
        <el-form-item label="目的地址">
          <el-input v-model="routingConfigurationsObj.destinationAddress" class="adjustInp"
                    placeholder="请输入IP地址类型（IPv4）" @blur="isIp(routingConfigurationsObj.destinationAddress)"></el-input>
        </el-form-item>
        <el-form-item label="掩码">
          <el-input v-model="routingConfigurationsObj.mask" class="adjustInp" vlaue="1"
                    @blur="isIp(routingConfigurationsObj.mask)"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input class="adjustInp" v-model.number="routingConfigurationsObj.priority"></el-input>
          <span>（1~9999）</span>
        </el-form-item>
        <el-form-item label="下一跳">
          <el-input class="adjustInp" v-model="routingConfigurationsObj.nextHop"
                    @blur="isIp(routingConfigurationsObj.nextHop)"></el-input>
        </el-form-item>
        <el-form-item label="网络接口">
          <el-select v-model="routingConfigurationsObj.outflowInterface">
            <el-option label="eth1" value="eth1"></el-option>
            <el-option label="eth2" value="eth2"></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="权重">-->
        <!--          <el-input class="adjustInp" v-model.number="defaultRouteObj.weights"></el-input>-->
        <!--          <span>（1~255）</span>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
    </el-dialog>


    <!--    下面是路由配置更改为防火墙字段更改的字段-->
    <firewall-List ref="firewallShow" @firewallData="firewallData" v-if="firewallOpen"
                   :judgeShow="judgeShow"></firewall-List>
  </div>
</template>
<script>
    import firewallList from './firewallList'
    import {constants} from 'fs';
    import {debug} from 'util';
    import {connect} from 'net';

    const defaultRoutingObj = {
        destinationAddress: "10.100.0.103", //IP地址（IPv4）
        mask: "255.255.255.0", //IP掩码类型
        nextHop: "10.1.0.103", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
        outflowInterface: "eth2",	//选项：配置为路由模式的物理接口
        priority: 1, //1-9999
        weights: 1 //1-255
    }

    export default {

        props: ['nameFromChild', 'firewall', 'sevData'],

        data() {
            return {

                // 下面是新增的代码
                chainsIndex: 0,
                vnfType: 0,
                allval: 0,
                // 下面是新增的代码

                edit: false,
                index: 0,
                dialogVisible: false,
                netWorkName: [],
                firewallOpen: false,
                interfacesShow: false, // 配置物理接口
                interfacesId: 0, // 获取eht0或1
                newDistinguish: false, // 通过DHCP获取不可修改
                flagBt: false, // 定义是否选择vpn
                flagtab: false, // 服务链是否展示
                vnfId: '', // VNF组件标识
                showserver: false, // 是否新建服务链
                vnfIndex: 0, // VNF组件在链中下标
                socFlag: 0, // 安全域下标
                blue: false, // 是否保存
                flagval: false, // VPN弹出框是否显示
                activeName: 'first', // TAS选项默认第一个
                judgeShow: false,
                serviceList: {chains: []},
                allList: [],  // 添加服务链数组
                equipmentNew: [],
                equipment: [ // 防火墙或VPN
                    {
                        value: '1',
                        label: '防火墙'
                    },
                    {
                        value: '2',
                        label: 'VPN'
                    }
                ],
                currentChains: [],
                chainsChen: {
                    chainId: 0, // 服务功能链标识
                    endDomainId: 0,	// 终点安全域标识
                    links: [ // 一条服务功能链上的短链数组
                        {
                            end: true,
                            endId: 0,	// 该短链终点的安全域或VNF组件标识，
                            linkId: 0,	// 短链标识
                            start: true,
                            startId: 0,				// 该短链起始的安全域或VNF组件标识；若isStart为false，则startId为VNF组件标识；若isStart为true，则startId为安全域标识
                            state: "EXECUTING",		// EXECUTING执行中	UNEXECUTED未执行	SUCCESS执行成功	FAIL执行失败	*
                            stateMessage: "acd"	// state为FAIL执行失败的错误信息		*
                        }
                    ],
                    startDomainId: 0,			// 起点安全域标识
                    state: "EXECUTING",
                    stateMessage: "abc",
                    vnfs: []
                },
                obj6: [],
                // 下面是bug修改增加的数据
                ipaddressAndMask01: '',
                IPMask: '',
                routingConfigurationsObj: {
                    destinationAddress: "10.100.0.103", //IP地址（IPv4）
                    mask: "255.255.255.0", //IP掩码类型
                    nextHop: "10.1.0.103", //IP地址（IPv4）  下一跳地址的子网需要和流出网口配置的子网相同
                    outflowInterface: "eth2",	//选项：配置为路由模式的物理接口
                    priority: 1, //1-9999
                    // weights: 1 //1-255
                },
                routingConfigurations: [],
                // 下面是bug修改增加的数据

                physicalInterfacesEthx: { // 物理接口配置
                    interfaceName: '', // 接口名称
                    linkworkMS: '0', // 链路工作模式
                    operatingMode: 0, // 工作模式
                    ipobtainMode: 1, // 工作地址获取
                    ipaddressAndMask: '',
                    ipaddressAndMask01: '',
                    IPMask: '',
                    IPaddress: 0,
                    netWorkName: '',
                },
                physicalInterfaces: [], // 物理接口配置
                // defaultRouteObj: { // 默认路由配置
                //     gateway: '10.0.102.12',
                //     priority: '1',
                //     weights: '1',
                //     defaultRoutingInterface: 'eth2'
                // },
                // defaultRoute: [],
                ipsecConfiguration: { // IPSEC基本配置
                    enableFlag: '0', // 是否启用ipsec
                    ikecycle: '28800', // ike秘钥周期
                    ipsecCycle: '3600', // ipsec秘钥周期
                    presharedKey: 'TypeYourPrekey', // 预共享密码
                    ikeport: '500', // ike端口设置
                    natport: '4500' // NATd端口设置
                },
                vpnRules: { // vpn规则
                    addressType: '0',	// 默认选择地址类型即可
                    localProtectionNetwork: '10.0.100.0/24',	// 填写ipsec本端保护子网
                    localProtectionProtocol: 'any',	// 选择默认any即可
                    localProtectionType: 'subnet',	// 默认选择网络地址
                    peerProtectionNetwork: '10.0.101.0/24', // 填写ipsec对端保护子网
                    peerProtectionProtocol: 'any', // 选择默认any即可
                    ruleName: 'test' // 用户自行填写

                },
                ikeConfiguration: { // IKE配置
                    ikename: 'test', // 名称
                    iketype: 'gateway', // 类型
                    peerAddressType: '1', // 对端地址类型
                    peerAddress: '10.0.102.12', // 对端地址
                    ProtocolType: '0', // 协议类型
                    authenticateType: '0', // 认证方式
                    presharedKey: 'TypeYourPrekey' // 预共享密码
                },
                securityPolicy: { // 安全策略
                    order: '1', // 序号
                    name: 'pf1', // name
                    sourceAddress: '0', // 源地址
                    srcport: '', // 源端口
                    destination: '0', // 目的地
                    time: '', // 时间
                    InflowNetwork: '', // 流入网口
                    OutflowNetwork: '', // 流出网口
                    service: '' // 服务
                },
                tunnelConfiguration: { // 隧道配置
                    tunnelName: 'test', // 名称
                    localExit: 'eth2', // 本地出口
                    bindingIKE: 'test', // 绑定ike
                    associatedVPNRules: 'test', // 关联vpn规则
                    delivery: false,
                    type: []
                },
                vnfsArray: [
                    {
                        vpn: {},
                        fhq: {}
                    }
                ],
                // 规则
                createVM: {
                    vcpusNeed: 0,
                    diskGbNeed: 0,
                    memoryNeed: 0,
                    hostId: '',
                    hostName: '',
                    isReProduce: false,
                    tmpId: '',
                    dname:''
                },
                createVMview:{
                    vcpusNeed: 0,
                    diskGbNeed: 0,
                    memoryNeed: 0,
                    hostId: '',
                    hostName: '',
                    isReProduce: false,
                    tmpId: '',
                    dname:''
                },
                allCreateVM: [],
                physicalForm: { // 表单校验
                    interfaceName: [
                        {required: true, message: '请输入接口名称', trigger: 'blur'}
                    ],
                    linkworkMS: [
                        {required: true, message: '请选择链路工作模式', trigger: 'change'}
                    ],
                },
                tableData: [
                    {
                        date: 'eth1',
                        id: 0
                    },
                    {
                        date: 'eth2',
                        id: 1
                    }
                ],
                // numfire: 0,
                // numvpn: 0
            }
        },
        components: {
            firewallList,
        },
        methods: {
            isIp(value) {
                if (value !== '') {
                    // var regexp = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
                    var regexp = /(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/;

                    var valid = regexp.test(value);

                    let obj = value.split('.').every(function (num) {
                        //切割开来，每个都做对比，可以为0，可以小于等于255，但是不可以0开头的俩位数
                        //只要有一个不符合就返回false
                        if (num.length > 1 && num.charAt(0) === '0') {
                            //大于1位的，开头都不可以是‘0’
                            return false;
                        }
                        return true;
                    });

                    if (valid && obj) {//首先必须是 xxx.xxx.xxx.xxx 类型的数字，如果不是，返回false
                        return
                    } else {
                        this.$message.error('输入ip格式错误')
                    }
                } else {
                    this.$message.error('请输入ip')
                }


            },
            handleClick(tab, event) {

            },
            // confirm() {
            //     let obj = Object.assign({}, this.defaultRouteObj, this.defaultRouteObj)
            //     this.defaultRoute.push(obj);
            //     this.dialogVisible = false;
            // },

            // 下面是更改为防火墙字段新增的代码
            confirm() {
                if (this.edit) {
                    // routingConfigurations
                    let obj = Object.assign({}, this.routingConfigurationsObj, this.routingConfigurationsObj)
                    this.routingConfigurations[this.index] = obj;
                } else {
                    let obj = Object.assign({}, this.routingConfigurationsObj, this.routingConfigurationsObj)
                    this.routingConfigurations.push(obj);
                }

                this.dialogVisible = false;

            },

            editRouter(row, index) {
                this.edit = true;
                this.index = index;
                this.dialogVisible = true;
                this.routingConfigurationsObj = row;
            },

            addRouter() {
                this.edit = false;
                this.index = 0;
                this.dialogVisible = true;
            },
            // 下面是更改为防火墙字段新增的代码


            deleteRow(index, rows) {
                rows.splice(index, 1);
            },

            newcreateVm(val) {
                // alert(1);
                Object.assign(this.$data.createVM, this.$options.data())
                this.allCreateVM.forEach((res) => {
                    if (res.dname === val) {
                        this.createVM.memory = res.memory
                        this.createVM.disk = res.disk
                        this.createVM.cpu = res.cpu
                    }
                })
            },

            staticxz(val) {
                if (val == 0) {
                    this.newDistinguish = true
                    this.physicalInterfacesEthx.ipaddressAndMask01 = ''
                    this.physicalInterfacesEthx.IPMask = ''
                    // 下面是bug修改增加的代码
                    this.ipaddressAndMask01 = ''
                    this.IPMask = ''
                    // 下面是bug修改增加的代码
                } else {
                    this.newDistinguish = false
                }
            },

            interfaceEdit(id) { // 物理接口配置eth0或eth1
                this.interfacesShow = true
                this.physicalInterfacesEthx.interfaceName = 'eth' + (id + 1)
                this.interfacesId = id
                this.physicalInterfacesEthx.ipaddressAndMask01 = ''
                this.physicalInterfacesEthx.IPMask = ''
                // 下面是bug修改增加的代码
                this.ipaddressAndMask01 = ''
                this.IPMask = ''
                // 下面是bug修改增加的代码

                if (this.physicalInterfaces.length >= (id + 1)) {
                    this.physicalInterfacesEthx = this.physicalInterfaces[id]
                    let dataMask = this.physicalInterfacesEthx.ipaddressAndMask.split('/')
                    this.physicalInterfacesEthx.ipaddressAndMask01 = dataMask[0]
                    this.physicalInterfacesEthx.IPMask = dataMask[1]
                    // 下面是bug修改增加的代码
                    this.ipaddressAndMask01 = dataMask[0]
                    this.IPMask = dataMask[1]
                    // 下面是bug修改增加的代码
                } else { // 以后删除代码用
                    let physicalInterfacesEthx01 = {
                        interfaceName: 'eth1', // 接口名称
                        linkworkMS: '0', // 链路工作模式
                        operatingMode: 0, // 工作模式
                        ipobtainMode: 1, // 工作地址获取
                        ipaddressAndMask: '10.0.100.11/255.255.255.0',
                        IPaddress: 0,
                        netWorkName: '',
                    }
                    let physicalInterfacesEthx02 = {
                        interfaceName: 'eth2', // 接口名称
                        linkworkMS: '0', // 链路工作模式
                        operatingMode: 0, // 工作模式
                        ipobtainMode: 1, // 工作地址获取
                        ipaddressAndMask: '10.0.102.11/255.255.255.0',
                        IPaddress: 0,
                        netWorkName: '',
                    }

                    if (id === 0) {
                        this.physicalInterfaces[0] = physicalInterfacesEthx01
                    } else if (id === 1) {
                        this.physicalInterfaces[1] = physicalInterfacesEthx02
                    }


                    this.physicalInterfacesEthx = this.physicalInterfaces[id]
                    let dataMask = this.physicalInterfacesEthx.ipaddressAndMask.split('/')
                    this.physicalInterfacesEthx.ipaddressAndMask01 = dataMask[0]
                    this.physicalInterfacesEthx.IPMask = dataMask[1]
                    // 下面是bug修改增加的代码
                    this.ipaddressAndMask01 = dataMask[0]
                    this.IPMask = dataMask[1]
                    // 下面是bug修改增加的代码

                }
            },

            interfacesSurBtn(id) {

                this.physicalInterfacesEthx.ipaddressAndMask = this.ipaddressAndMask01 + '/' + this.IPMask
                // this.physicalInterfacesEthx.ipaddressAndMask = this.physicalInterfacesEthx.ipaddressAndMask01 + '/' + this.physicalInterfacesEthx.IPMask


                // let newPhysicalInterfacesEthx = {
                //     interfaceName: '',
                //     linkworkMS: '',
                //     operatingMode: 0,
                //     ipobtainMode: 1,
                //     ipaddressAndMask: '',
                //     IPaddress: 0,
                //     netWorkName: '',
                // }
                // newPhysicalInterfacesEthx.interfaceName = this.physicalInterfacesEthx.interfaceName
                // newPhysicalInterfacesEthx.linkworkMS = this.physicalInterfacesEthx.linkworkMS
                // newPhysicalInterfacesEthx.operatingMode = this.physicalInterfacesEthx.operatingMode
                // newPhysicalInterfacesEthx.ipobtainMode = this.physicalInterfacesEthx.ipobtainMode
                // newPhysicalInterfacesEthx.ipaddressAndMask = this.physicalInterfacesEthx.ipaddressAndMask
                // newPhysicalInterfacesEthx.IPaddress = this.physicalInterfacesEthx.IPaddress
                // newPhysicalInterfacesEthx.netWorkName = this.physicalInterfacesEthx.netWorkName
                // this.physicalInterfaces[id] = newPhysicalInterfacesEthx
                // this.interfacesShow = false

                this.physicalInterfacesEthx.ipaddressAndMask === '/' ? this.physicalInterfacesEthx.ipaddressAndMask = '' : this.physicalInterfacesEthx.ipaddressAndMask
                this.physicalInterfacesEthx.enableFlag = this.physicalInterfacesEthx.enableFlag === true ? 1 : 0
                this.physicalInterfaces[id] = JSON.parse(JSON.stringify(this.physicalInterfacesEthx))
                this.interfacesShow = false

            },

            vpnSurBtn(val) { // vpn确定获取数据

                let VPNdata = {
                    defaultRoutings: [],
                    ikeConfiguration: { // IKE配置
                        authenticateType: 0, // 认证方式
                        ikename: '',	// 用户自行填写
                        iketype: '',	// 类型包含：网关，客户端。 用户选择网关即可
                        peerAddress: '',	// 填写对端网关地址
                        peerAddressType: 0,	// 选择“ip地址”类型即可
                        presharedKey: '',	// 可用默认值也可以自定义   两端的预共享密钥必须保持一致  预共享密钥
                        protocolType: 0	// 选择国际通用标准
                    },
                    interfaceTraffic: 0, // 接口流量需求，单位为G
                    ipsecConfiguration: {	// ipsec基本配置
                        enableFlag: 0, // 0:不启用；1:启用   启动ipsec服务
                        ikecycle: 0, // 启用默认值即可
                        ikeport: 0,	// 默认500
                        ipsecCycle: 0, // 启用默认值即可
                        natport: 0,	// 默认4500
                        presharedKey: '' // 含默认值，也可自定义为：“123456”等。预共享密钥配置项，这是全局配置，也可在ike配置项中为每个具体隧道单独配置
                    },
                    physicalInterfaces: [ // 物理接口配置
                    ],
                    tunnelConfiguration: { // 网关隧道配置
                        associatedVPNRules: '',	// 选择配置好的VPN规则即可
                        bindingIKE: '', // 选择配置好的IKE即可
                        enableFlag: 0, // 0:不启用；1:启用
                        localExit: '', // 选择上述配置的物理接口即可
                        tunnelName: ''	// 用户自行填写
                    },
                    vpnRules: { // vpn规则
                        addressType: 0,	// 默认选择地址类型即可
                        localProtectionNetwork: '',	// 填写ipsec本端保护子网
                        localProtectionProtocol: '',	// 选择默认any即可
                        localProtectionType: '',	// 默认选择网络地址
                        peerProtectionNetwork: '', // 填写ipsec对端保护子网
                        peerProtectionProtocol: '', // 选择默认any即可
                        ruleName: '' // 用户自行填写
                    },
                    vpnType: 0,	// VPN类型 0：IPSec 1：L2F ……
                    vpnName: ''	// VPN名称
                }

                VPNdata.ikeConfiguration = JSON.parse(JSON.stringify(this.ikeConfiguration))
                VPNdata.ipsecConfiguration = JSON.parse(JSON.stringify(this.ipsecConfiguration))
                VPNdata.physicalInterfaces = JSON.parse(JSON.stringify(this.physicalInterfaces))
                VPNdata.tunnelConfiguration = JSON.parse(JSON.stringify(this.tunnelConfiguration))
                VPNdata.vpnRules = JSON.parse(JSON.stringify(this.vpnRules))
                // VPNdata.defaultRoutings = this.routingConfigurations
                // VPNdata.defaultRoutings.push(this.routingConfigurations)
                VPNdata.defaultRoutings = JSON.parse(JSON.stringify(Array.from(new Set(this.routingConfigurations))))
                this.flagBt = true
                this.flagval = false
                VPNdata.vpnName = 'V' + new Date().getTime()
                // this.chainsIndex,this.vnfIndex, this.vnfType, firewall, 'fhq', this.createVM

                // vpn传值
                this.oreget(this.chainsIndex, this.vnfIndex, this.vnfType, VPNdata, 'vpn', this.createVM, this.allval)
                // vpn传值
            },
            // this.oreget(chainsIndex, vnfIndex, vnfType,  data, name, createVm)

            oreget(chainsIndex, vnfIndex, vnfType, data, name, createVM) { // 点击防火墙或VPN保存表单数据
                let newCreateVM = createVM
                let list = {vpn: {}, fhq: {}, type: ''}

                if (name === 'vpn') {
                    list.vpn = data
                    list.type = '1'
                } else if (name === 'fhq') {
                    list.fhq = data
                    list.type = '0'
                }
                let vnf = {
                    firewall: JSON.stringify(list.fhq) == '{}' ? null : list.fhq,
                    vnfId:(new Date()).getTime(),
                    vnfIndex: vnfIndex,
                    vpn: JSON.stringify(list.vpn) == '{}' ? null : list.vpn,
                    vnfType: list.type,
                    vnfName: '',
                    vm: {
                        cmpId: "123213",
                        vmId: '0'
                    },
                    createVM: {
                        vcpusNeed: newCreateVM.cpu,
                        memoryNeed: newCreateVM.memory,
                        diskGbNeed: newCreateVM.disk,
                        tmpId: newCreateVM.did,
                        dname: newCreateVM.dname,
                        hostId: '',
                        hostName: '',
                        isReProduce: false,
                    },
                    inPortId: 1,
                    outPortId: 2,
                    state: 'obj',
                    stateMessage: "12"
                }

                //根据当前服务链下标找到当前设备下标，再判断设备下标之前的设备是否已经存在如果没有配置，那么配置一个NULL
                if (this.currentChains[chainsIndex].vnfs[vnfIndex] === undefined) {
                    for (let i = 0; i < vnfIndex; i++) {
                        if (this.currentChains[chainsIndex].vnfs[i] === undefined) {
                            this.currentChains[chainsIndex].vnfs.push(null)
                        }
                    }
                    this.currentChains[chainsIndex].vnfs.push(vnf)
                } else {
                    //存在就更新当前
                    this.currentChains[chainsIndex].vnfs[vnfIndex] = vnf
                }


            },

            fireTab(value, index, indexbs) { // 查看是防火墙还是vpn图标

                if (this.blue) {
                    return
                }

                // for (let i = 0;　i < indexbs; i++){
                //     if (!this.allList[index].unitList[i].isClick){
                //         this.$message({
                //             showClose: false,
                //             message: '请配置先配置前面的设备',
                //             type: 'warning'
                //         })
                //         return;
                //     }
                // }

                this.socFlag = index
                this.vnfIndex = indexbs
                this.vnfType = value.value - 1
                value.isClick = true
                if (value.label === '防火墙') {
                    this.firewallOpen = true
                    this.$nextTick(() => {

                        this.$refs.firewallShow.firewallShow(this.socFlag, this.vnfIndex, this.vnfType, this.currentChains) //[index].vnfs[indexbs]
                    })

                } else if (value.label === 'VPN') {
                    this.flagval = true
                    this.activeName = 'first'
                    this.$nextTick(() => {
                        this.dataDocking(this.socFlag, this.vnfIndex, this.vnfType, this.currentChains)
                    })

                }
            },

            dataDocking(val, vnfIndex, vnfType, list) {

                this.chainsIndex = val
                this.vnfIndex = vnfIndex
                this.vnfType = vnfType
                // this.allval=allval
                this.physicalInterfaces = []
                this.routingConfigurations = []
                this.routingConfigurationsObj = Object.assign({}, JSON.parse(JSON.stringify(defaultRoutingObj)))

                // if (list && list.vpn) {
                //     // let ipask = list.vpn.physicalInterfaces.ipaddressAndMask.split('/')
                //     // this.physicalInterfaces = list.vpn.physicalInterfaces
                //     // this.physicalInterfaces.ipaddressAndMask01 = ipask[0]
                //     // this.physicalInterfaces.IPMask = ipask[1]
                //     this.physicalInterfaces = list.vpn.physicalInterfaces
                //     this.routingConfigurationsObj = list.vpn.defaultRoutings[0]
                //     this.ipsecConfiguration = list.vpn.ipsecConfiguration
                //     this.vpnRules = list.vpn.vpnRules
                //     this.ikeConfiguration = list.vpn.ikeConfiguration
                //     this.tunnelConfiguration = list.vpn.tunnelConfiguration
                // }
                // if (list && list.createVM) {
                //     this.createVM.cpu = list.createVM.vcpusNeed
                //     this.createVM.memory = list.createVM.memoryNeed
                //     this.createVM.disk = list.createVM.diskGbNeed
                //     this.createVM.did = list.createVM.hostId
                // }


                this.$http({
                    url: this.$http.adornHardWareUrl('/generator/deploy/listAll'),
                    method: 'get',
                    params: this.$http.adornParams()
                }).then(({data}) => {
                    if (data && data.code == '0') {
                        this.allCreateVM = data.all
                    }
                })


                let vpnData = list[val].vnfs[vnfIndex]
                if (list && vpnData && vpnData.vpn) {

                    this.physicalInterfaces = vpnData.vpn.physicalInterfaces
                    // this.bridgeInterfaceConfiguration1 = list.firewall.bridgeInterfaceConfiguration1 || this.bridgeInterfaceConfiguration1
                    // this.routingConfigurationsObj = fireData.firewall.routingConfigurations ? fireData.firewall.routingConfigurations[0] : this.routingConfigurationsObj
                    this.routingConfigurations = vpnData.vpn.defaultRoutings ? vpnData.vpn.defaultRoutings : []
                    this.strategyList = vpnData.vpn.strategyList ? vpnData.vpn.strategyList[0] : this.strategyList

                    this.vpnRules = vpnData.vpn.vpnRules ? vpnData.vpn.vpnRules : this.vpnRules
                    this.tunnelConfiguration = vpnData.vpn.tunnelConfiguration ? vpnData.vpn.tunnelConfiguration : this.tunnelConfiguration
                    this.ipsecConfiguration = vpnData.vpn.ipsecConfiguration ? vpnData.vpn.ipsecConfiguration : this.ipsecConfiguration
                    this.ikeConfiguration = vpnData.vpn.ikeConfiguration ? vpnData.vpn.ikeConfiguration : this.ikeConfiguration


                }


                if (list && vpnData && vpnData.createVM) {

                    // this.newcreateVm()
                    // this.nextTick(()=>{
                    //
                    // })

                    this.createVMview.cpu = vpnData.createVM.vcpusNeed
                    this.createVMview.memory = vpnData.createVM.memoryNeed
                    this.createVMview.disk = vpnData.createVM.diskGbNeed
                    this.createVMview.dId = vpnData.createVM.tmpId
                    this.createVMview.dname = vpnData.createVM.dname

                    this.createVM=this.createVMview
                }


            },
            // 删除域按钮
            deleEvent(index) {
                this.allList.splice(index, 1)
                this.currentChains.splice(index, 1)
                this.serviceList.chains.splice(index, 1)
            },
            sercerChange(value, index) { // 选择安全域
                this.nameFromChild.forEach(itme => {
                    if (itme.domainName == value[0]) {
                        this.currentChains[index].endDomainId = 0
                        this.currentChains[index].startDomainId = itme.domainId
                    } else if (itme.domainName == value[1]) {
                        this.currentChains[index].endDomainId = itme.domainId
                    } else if (value.length === 0) {
                        this.currentChains[index].endDomainId = 0
                        this.currentChains[index].startDomainId = 0
                    }
                })
                let b = this.currentChains.slice()
                let a = this.currentChains
                let chainsMap = {};
                if (a.length > 1 && value.length > 1) {
                    for (let i = 0; i < a.length; i++) {
                        if (a[i].startDomainId != 0 && a[i].endDomainId != 0) {
                            if (chainsMap[a[i].startDomainId + "_" + a[i].endDomainId]) {
                                this.$message({
                                    showClose: false,
                                    message: '选择安全域重复，请重新选择',
                                    type: 'warning'
                                })
                            } else if (chainsMap[a[i].endDomainId + "_" + a[i].startDomainId]) {
                                this.$message({
                                    showClose: false,
                                    message: '选择安全域重复，请重新选择',
                                    type: 'warning'
                                })
                            } else {
                                chainsMap[a[i].startDomainId + "_" + a[i].endDomainId] = 1;
                                chainsMap[a[i].endDomainId + "_" + a[i].startDomainId] = 1;
                            }
                        }
                    }
                }
            },
            // 编辑按钮
            changeBtn(index) {
                this.allList[index].showRight = true;
                this.blue = false
            },
            // 获取数据集合
            passMuster(index) {
                if (!this.serviceList.chains) {
                    this.serviceList.chains = []
                }
                if (this.serviceList.chains[index] == undefined) {
                    this.serviceList.chains.splice(index, 0, this.currentChains[index])
                } else {
                    this.serviceList.chains[index] = this.currentChains[index]
                }
                if (this.allList.length === this.serviceList.chains.length) {
                    this.blue = true
                } else {
                    this.blue = false
                }
                this.$emit('jsonBottom', this.serviceList.chains, this.blue)

            },
            // 保存按钮
            saveBtn(index, list) {
                if (list.values.length === 2) {
                    this.blue = true
                    this.passMuster(index)
                    if (this.allList[index].unitList != 0) {
                        this.allList[index].showRight = false;
                    } else if (this.allList[index].unitList == 0) {
                        this.allList[index].showRight = true;
                        return false
                    }
                } else {
                    this.$message({
                        showClose: false,
                        message: '请选择安全域',
                        type: 'warning'
                    })
                }
            },
            firewallData(chainsIndex, vnfIndex, vnfType, data, name, createVm) { // 防火墙传值
                this.oreget(chainsIndex, vnfIndex, vnfType, data, name, createVm)
            },
            addIcon(cal, value, index) {

                if (!cal) {
                    if (!this.allList[index]) {
                        this.allList[index].unitList = []
                    }

                    this.allList[index].unitList.push({
                        value: value.toString(),
                        label: this.$safeDev(value),
                        disabled: true,
                        isClick: false

                    })

                    // if (value == 1) {
                    //     this.allList[index].unitList.push({
                    //         value: '1',
                    //         label: '防火墙',
                    //         disabled: true,
                    //         isClick: false
                    //         // numfire: this.numfire
                    //     })
                    //     // this.numfire++
                    // } else if (value == 2) {
                    //     this.allList[index].unitList.push({
                    //         value: '2',
                    //         label: 'VPN',
                    //         disabled: true,
                    //         isClick: false
                    //         // numvpn: this.numvpn
                    //     })
                    //     // this.numvpn++
                    // }

                    this.vnfId = this.allList[index].unitList.length
                    this.vnfIndex = this.allList[index].unitList.length
                    this.$emit('toMain', this.vnfId, this.vnfIndex)
                }
            },
            deleteIcon(time, index, timeIndex) { // 服务链防火墙或vpn删除
                if (!this.blue) {
                    this.allList[index].unitList.splice(timeIndex, 1)

                    // 下面是点击vpn或者防火墙删除按钮，显示错乱解决方法
                    this.currentChains[index].vnfs.splice(timeIndex, 1)
                    // 下面是点击vpn或者防火墙删除按钮，显示错乱解决方法

                    if (this.serviceList.chains.length > 0) {
                        this.serviceList.chains[index].vnfs.splice(timeIndex, 1)
                        this.$emit('jsonBottom', this.serviceList.chains, this.blue)
                    }
                } else {
                    this.$message({
                        showClose: false,
                        message: '可编辑状态下删除VPN或防火墙',
                        type: 'warning'
                    })
                }
            },
            // 添加配置
            newEquipment(value, index) {
                // console.log(value, index, '54544')
                // this.allList[index].unitList = []
                // if (this.allList[index].value.length !=0) {
                //   this.allList[index].value.forEach(value => {
                //     if (value==1) {
                //       this.allList[index].unitList.push({
                //         value: '1',
                //         label: '防火墙',
                //         disabled: true
                //       })
                //     } else if(value==2){
                //       this.allList[index].unitList.push({
                //         value: '2',
                //         label: 'VPN',
                //         disabled: true
                //       })
                //     }
                //   })
                // }
                // this.vnfId = value.length
                // this.vnfIndex = value.length
                // this.$emit('toMain', this.vnfId,this.vnfIndex)
            },
            newList() { // 新增服务
                if (this.flagtab == false) {
                    this.flagtab = true
                }
                this.allList.push({
                    showRight: true,
                    unitList: []
                })
                let chains = {
                    chainId: 0, // 服务功能链标识
                    endDomainId: 0,	// 终点安全域标识
                    links: [ // 一条服务功能链上的短链数组
                        {
                            end: true,
                            endId: 0,	// 该短链终点的安全域或VNF组件标识，
                            linkId: 0,	// 短链标识
                            start: true,
                            startId: 0,				// 该短链起始的安全域或VNF组件标识；若isStart为false，则startId为VNF组件标识；若isStart为true，则startId为安全域标识
                            state: "EXECUTING",		// EXECUTING执行中	UNEXECUTED未执行	SUCCESS执行成功	FAIL执行失败	*
                            stateMessage: "acd"	// state为FAIL执行失败的错误信息		*
                        }
                    ],
                    startDomainId: 0,			// 起点安全域标识
                    state: "EXECUTING",
                    stateMessage: "abc",
                    vnfs: []
                }
                this.currentChains.push(chains);
            },
            openServer(val) { // 展开服务域
                this.showserver = val
                this.init()
            },

            init() { // 数据初始化
                // debugger
                let sevpro = JSON.stringify(this.sevData) == "{}"
                if (sevpro) {
                    return
                } else {
                    (this.sevData.details === "xiugai" || this.sevData.details === "moban") ? this.judgeShow = false : this.judgeShow = true
                }
                this.serviceList = this.sevData.domains
                // console.log(this.serviceList,'this.serviceList')
                let newServiceList = this.serviceList.chains || []// 服务链数据
                this.currentChains = this.serviceList.chains || []
                let newdomains = this.serviceList.domains || []// 安全域数据
                var chainsChenls = []
                let newAllList = []
                for (let i = 0; i < newServiceList.length; i++) {
                    newAllList[i] = {showRight: true, unitList: [], value: [], values: [], id: i}
                    chainsChenls[i] = {startDomainId: '', endDomainId: '', id: i}

                    newAllList[i].values = []

                    newdomains.forEach(r => {
                        newAllList[i].values.push(r.domainName)
                        if (newServiceList[i].startDomainId == r.domainId) {
                            newAllList[i].values[0] = r.domainName
                            chainsChenls[i].startDomainId = r.domainId
                        }
                        if (newServiceList[i].endDomainId == r.domainId) {
                            newAllList[i].values[1] = r.domainName
                            chainsChenls[i].endDomainId = r.domainId
                        }


                    })

                    this.allList = newAllList

                    if (newServiceList[i].vnfs != null) {
                        newServiceList[i].vnfs.forEach(p => {
                            if (p.vnfType == '1') {
                                newAllList[i].value.push('2')
                                this.addIcon(false, '2', i)
                            } else if (p.vnfType == '0') {
                                newAllList[i].value.push('1')
                                this.addIcon(false, '1', i)
                            }
                        })
                    }

                }
            },
            getnetwork() {
                this.$http({
                    url: this.$http.adornUrl('/vm/networkList'),
                    method: 'post',
                }).then(({data}) => {
                    if (data.list.length !== 0 || data.list !== unedfined || data.list !== null) {
                        this.netWorkName = data.list

                    }
                }).catch(error => {
                    this.$message({
                        showClose: false,
                        message: '程序异常,请联系管理员',
                        type: 'warning'
                    })
                })
            },
            getEquipment() {
                this.$http({
                    url: this.$http.adornHardWareUrl('/generator/content/list'),
                    method: 'get',
                }).then(({data}) => {

                    if (data && data.code === 0) {
                        for (let i = 0; i < data.page.list.length; i++) {
                            this.equipmentNew.push({
                                value: parseInt(data.page.list[i].code) + 1,
                                label: data.page.list[i].name
                            })
                        }
                    }

                }).catch(error => {
                    this.$message({
                        showClose: false,
                        message: '程序异常,请联系管理员',
                        type: 'warning'
                    })
                })
            }

        },
        mounted() {
            // this.init()
            this.getEquipment();
            this.getnetwork();
        },
        watch: {
            showserver(val, old) {
                if (!val) {
                    this.flagtab = val
                    this.allList = []
                    this.serviceList.chains = []
                }
            }
        }
    }
</script>
